<template>
    <div class="find-pwd-container">
        <div class="pwd-container">
            <div class="title">
                <div class="title-text">找回密码</div>
            </div>
            <el-form class="form-wrap" :model="loginForm" :rules="rules" ref="loginForm" label-width="120px">
                <el-form-item label="手机号码" prop="phone_num">
                    <el-input @blur="phoneNumBlur" v-model="loginForm.phone_num" maxlength="11" placeholder="请输入手机号码">
                    </el-input>
                </el-form-item>
                <div class="code-wrap">
                    <el-form-item class="code-input" label="验证码" prop="code">
                        <el-input :disabled="!loginForm.phone_num" v-model="loginForm.code" maxlength="10"
                            placeholder="请输入验证码"></el-input>
                    </el-form-item>
                    <div class="code-img" @click="getImgCode">
                        <img v-if="imgCode.length" style="width:100px;height:50px;cursor: pointer;" :src="imgCode" alt
                            srcset />
                        <el-button v-else :disabled="!loginForm.phone_num" class="code-btn" type="primary">获取验证码
                        </el-button>
                    </div>
                </div>
                <div class="code-wrap">
                    <el-form-item class="code-input" label="短信验证码" prop="phone_code">
                        <el-input v-model="loginForm.phone_code" maxlength="10" :disabled="!loginForm.code"
                            placeholder="请输入短信验证码"></el-input>
                    </el-form-item>
                    <div class="code-img">
                        <el-button :disabled="!loginForm.code || this.sendCode" class="code-btn" type="primary"
                            @click="sendMsg">{{sendCode ? seconds +'s':'发送'}}</el-button>
                    </div>
                </div>
                <el-form-item label="新密码" prop="login_password">
                    <el-input :disabled="!loginForm.phone_code" v-model="loginForm.login_password" maxlength="20"
                        placeholder="请输入新密码"></el-input>
                </el-form-item>
            </el-form>
            <el-button :disabled="!loginForm.login_password" @click="findPwdSubmit" class="submit-btn">完成</el-button>
        </div>
    </div>
</template>
<script>
import * as api from "@/http/admin-api.js";
export default {
    data() {
        const validatePhone = (rule, value, callback) => {
            const regPhone = /^1[3|4|5|7|8][0-9]{9}$/;
            if (value === "") {
                callback(new Error("*请输入手机号码"));
            } else if (!regPhone.test(this.loginForm.phone_num)) {
                callback(new Error("*请输入正确的手机号"));
            } else {
                callback();
            }
        };
        return {
            loginForm: {
                phone_num: "",
                login_password: "",
                phone_code: "",
                code: ""
            },
            rules: {
                phone_num: [
                    { validator: validatePhone, trigger: "blur" },
                    {
                        required: true,
                        message: "*请输入手机号码",
                        trigger: "blur"
                    }
                ],
                phone_code: [
                    {
                        required: true,
                        message: "*请输入手机验证码",
                        trigger: "blur"
                    }
                ],
                login_password: [
                    {
                        required: true,
                        message: "*请输入密码",
                        trigger: "blur"
                    }
                ],
                code: [
                    {
                        required: true,
                        message: "*请输入验证码",
                        trigger: "blur"
                    }
                ]
            },
            imgCode: "",
            seconds: 60,
            sendCode: false
        };
    },
    methods: {
        reduce() {
            this.timer = setInterval(() => {
                if (this.seconds === 0) {
                    this.seconds = 60;
                    this.sendCode = false;
                    clearInterval(this.timer);
                } else {
                    this.seconds -= 1;
                }
            }, 1000);
        },
        getImgCode() {
            const regPhone = /^1[3|4|5|7|8][0-9]{9}$/;
            if (regPhone.test(this.loginForm.phone_num)) {
                api.createCode({
                    phone_num: this.loginForm.phone_num
                }).then(res => {
                    if (res) {
                        this.$message({
                            type: "success",
                            message: "获取成功！"
                        });
                        this.imgCode = res.bus_json;
                    }
                });
            } else {
                this.$message({
                    type: "error",
                    message: "请输入正确的手机号码"
                });
            }
        },
        sendMsg() {
            if (this.sendCode) {
                return;
            }
            api.sendCode({
                phone_num: this.loginForm.phone_num,
                code: this.loginForm.code
            }).then(res => {
                if (res) {
                    this.sendCode = true;
                    this.$message({
                        type: "success",
                        message: "获取成功！"
                    });
                    this.reduce();
                }
            });
        },
        findPwdSubmit() {
            api.resetPassword({
                phone_num: this.loginForm.phone_num,
                phone_code: this.loginForm.phone_code,
                login_password: this.loginForm.login_password
            }).then(res => {
                if (res) {
                    this.$message({
                        type: "success",
                        message: res.error_msg
                    });
                    this.$router.push("/login");
                }
            });
        }
    },
    destroyed() {
        clearInterval(this.timer);
    }
};
</script>
<style lang="scss">
.find-pwd-container {
    width: 100%;
    height: 100%;

    .pwd-container {
        width: 500px;
        height: 500px;
        position: relative;
        left: 50%;
        top: 5%;
        transform: translate(-50%, 0%);

        .title {
            width: 100%;
            font-size: 24px;
            color: #1159a3;
            position: relative;
            margin: 0 auto;
            margin-top: 49px;
            border-bottom: 1px solid #0d62b9;
            display: inline-flex;
            align-items: center;
            justify-content: center;

            .title-text {
                padding: 14px;
                border-bottom: 3px solid #0d62b9;
                width: 96px;
            }
        }

        .form-wrap {
            margin-top: 40px;

            .code-wrap {
                width: 100%;
                display: inline-flex;
                align-items: center;
                justify-content: space-between;

                .code-input {
                    width: 340px;
                }

                .code-img {
                    margin-bottom: 22px;

                    .code-btn {
                        width: 110px;
                        background: #0d62b9;
                        outline: none;
                        border: none;
                    }
                }
            }
        }
    }

    .submit-btn {
        background: #0d62b9;
        color: white;
        outline: none;
        border: none;
    }
}
</style>